<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
    <script src="config.js?v=<%=new Date().getTime()%>"></script>
    <!--[if lt IE 11
      ]><script>
        window.location.href = "/html/ie.html";
      </script><!
    [endif]-->
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Arial, sans-serif;
        /* background: linear-gradient(to bottom right, #e0f7fa, #80deea); */
      }

      #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: rgba(255, 255, 255, 0.8);
      }

      /* Loader Styling */
      #loader {
        position: relative;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
      }

      /* Outer Circle */
      #loader .outer-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px solid transparent;
        border-top-color: #ff5722;
        border-radius: 50%;
        animation: spin 2s linear infinite;
      }

      /* Second Circle */
      #loader .second-circle {
        position: absolute;
        top: 8%;
        left: 8%;
        width: 84%;
        height: 84%;
        border: 4px solid transparent;
        border-top-color: #3f51b5;
        border-radius: 50%;
        animation: spin 2.5s linear infinite reverse;
      }

      /* Middle Circle */
      #loader .middle-circle {
        position: absolute;
        top: 16%;
        left: 16%;
        width: 68%;
        height: 68%;
        border: 4px solid transparent;
        border-top-color: #00bcd4;
        border-radius: 50%;
        animation: spin 3s linear infinite;
      }

      /* Fourth Circle */
      #loader .fourth-circle {
        position: absolute;
        top: 24%;
        left: 24%;
        width: 52%;
        height: 52%;
        border: 4px solid transparent;
        border-top-color: #8e44ad;
        border-radius: 50%;
        animation: spin 3.5s linear infinite reverse;
      }

      /* Inner Circle */
      #loader .inner-circle {
        position: absolute;
        top: 32%;
        left: 32%;
        width: 36%;
        height: 36%;
        border: 4px solid transparent;
        border-top-color: #8bc34a;
        border-radius: 50%;
        animation: spin 4s linear infinite;
      }

      /* Pulsating Effect */
      #loader .pulse {
        position: absolute;
        top: 40%;
        left: 40%;
        width: 20%;
        height: 20%;
        background-color: #ffeb3b;
        border-radius: 50%;
        animation: pulse 1.5s ease-out infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }

      .loaded #loader-wrapper .loader-section.section-left {
        transform: translateX(-100%);
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .loaded #loader-wrapper .loader-section.section-right {
        transform: translateX(100%);
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .loaded #loader {
        opacity: 0;
        transition: all 0.3s ease-out;
      }

      .loaded #loader-wrapper {
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.3s 1s ease-out;
      }

      .no-js #loader-wrapper {
        display: none;
      }

      .no-js h1 {
        color: #222222;
      }

      #loader-wrapper .load_title {
        font-family: "Open Sans", sans-serif;
        color: #00796b;
        font-size: 20px;
        width: 100%;
        text-align: center;
        z-index: 1002;
        position: absolute;
        top: 60%;
        line-height: 32px;
        opacity: 0.9;
      }

      #loader-wrapper .load_title span {
        font-weight: normal;
        font-style: italic;
        font-size: 14px;
        color: #004d40;
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="loader-wrapper">
        <!-- Loader with multiple rotating circles and a pulse effect -->
        <div id="loader">
          <div class="outer-circle"></div>
          <div class="second-circle"></div>
          <div class="middle-circle"></div>
          <div class="fourth-circle"></div>
          <div class="inner-circle"></div>
          <div class="pulse"></div>
        </div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">
          加载中，请稍候...<br /><span>Loading, please wait...</span>
        </div>
      </div>
    </div>
  </body>
</html>
